<!DOCTYPE html>
<html>
  <head>
    <title>{{ blog.title }}</title>
    <link rel="stylesheet" href="{{ assets }}/style/screen.css" type="text/css">
  </head>
  <body>
    {{>header}}
    <div id="tagcloud"></div>
    <div id="content">
    <!-- form to create a post -->
    <form id="new-post" action="new.html" method="post">
      <h1>{{pageTitle}}</h1>
        <p><label>Title</label>
          <input type="text" size="50" name="title" value="{{title}}"></p>
      <p><label for="body">Body</label>
      <textarea name="body" rows="28" cols="80">{{body}}</textarea></p>
      <p>
        <label for="tags">Click tags to add them. (split by ',')</label>
        <input size="50" type="text" name="tags" value="{{tags}}">
      </p>
      <p>
        <input id="preview" type="button" value="Preview"/>
        <input type="submit" value="Save &rarr;"/> 
        <span id="saved" style="display:none;">Saved</span>
        </p>
    </form>
    <a target="_new" href="http://warpedvisions.org/projects/markdown-cheat-sheet/">Markdown help</a>
      <div id="show-preview"></div>
    </div>
  </body>
  {{>scripts}}
  <script src="../../script/jquery.scrollTo.js"></script>
  <script type="text/javascript" charset="utf-8">
    $.couch.app(function(app) {
      var path = app.require("vendor/couchapp/lib/path").init(app.req);
      var postForm, blog = app.require("lib/blog");
      
      // extend the tagcloud so that clicks add tags to the current post
      var tagcloud = $.extend(true, {}, this.ddoc.evently.tagcloud, {
        _init : {
          selectors : {
            a : {
              click : function() {
                var tag = $(this).text();
                var tags = $("input[name=tags]").val();
                if (tags) tags = tags+", ";
                $("input[name=tags]").val(tags + tag);
                return false;
              }
            }
          }
        }
      });
      $("#tagcloud").evently(tagcloud, this);
      var postDoc = {{{doc}}};

      $('label[for=body]').append(' <em>with '+(postDoc.format||'html')+'</em>');
      $("form#new-post").submit(function() {
        postDoc.author = $$("#account").userCtx.name;
        postDoc.body = $("textarea[name=body]").val();
        postDoc.title = $("input[name=title]").val();
        var dtags = [], tags = $("input[name=tags]").val().split(",");
        for(var i in tags) {
          dtags.push($.trim(tags[i]));
        }
        postDoc.tags = dtags;
        if (!postDoc.created_at) {
          postDoc.created_at = new Date();
        }
        if (!postDoc._id) {
          postDoc._id = blog.slugifyString(postDoc.title);
        }
        app.db.saveDoc(postDoc, {
          success : function(resp) {
            $("#saved").text("Saved _rev: "+resp.rev).fadeIn(500).fadeOut(6000);
            $('h1').html('Editing <a href="'+path.show('post',resp.id)+'">'+resp.id+'</a> by '+postDoc.author);
          }
        });
        return false;
      });

      if (postDoc._id) {
        $('#preview').before('<input type="button" id="delete" value="Delete Post"/> ');
        $("#delete").click(function() {
          app.db.deleteDoc(postDoc, {
            success : function(resp) {
              $("h1").text("Deleted "+resp.id);
              $('form#new-post input').attr('disabled', true);
            }
          });
          return false;
        });
      }

      $("#preview").click(function() {
        var markdown = app.require("vendor/couchapp/lib/markdown");
        var html = markdown.encode($("textarea[name=body]").val());
        $('#show-preview').html(html);
        $('body').scrollTo('#show-preview', {duration: 500});
      });
    });
  </script>
</html>